<template>
  <!-- 条件-->
  <a-modal :width="700" v-model:visible="showChooseCopyUser" :title="'条件' + (index + 1)" title-align="start" :mask-closable="false" @cancel="closedDialog" @ok="submitData">
    <div class="dialog-con">
      <p>审批单据满足以下条件，审批流程就走该条分支</p>
      <a-select v-model="editInfo.conditionType" style="width: 200px; margin-top: 10px">
        <a-option value="ALL" label="满足以下所有条件" />
        <a-option value="ANY" label="满足以下任何条件" />
      </a-select>
      <div style="margin-top: 20px">
        <div class="title flex-c">
          <h3>指定发起人</h3>
          <p class="label">没有指定发起人则是全部成员</p>
        </div>
        <a-button type="text" @click="showChooseUsers = true">+添加成员</a-button>
        <div>
          <a-tag color="#165dff" style="margin: 0 10px 10px 0" v-for="(item, i) in editInfo.promoters" :key="item.userId" closable @close="editInfo.promoters.splice(i, 1)">{{ item.userName }}</a-tag>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div class="title flex-c">
          <h3>指定发起人所属部门</h3>
          <p class="label">没有指定部门则是全部部门</p>
        </div>
        <a-button type="text" @click="showChooseDepts = true">+添加部门</a-button>
        <div>
          <a-tag color="#165dff" style="margin: 0 10px 10px 0" v-for="(item, i) in editInfo.promoterDepts" :key="item.deptId" closable @close="editInfo.promoterDepts.splice(i, 1)">{{ item.deptName }}</a-tag>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div class="title flex-c">
          <h3>指定发起人所属角色</h3>
          <p class="label">没有指定角色则是全部角色</p>
        </div>
        <a-button type="text" @click="showChooseRoles = true">+添加角色</a-button>
        <div>
          <a-tag color="#165dff" style="margin: 0 10px 10px 0" v-for="(item, i) in editInfo.promoterRoles" :key="item.roleId" closable @close="editInfo.promoterRoles.splice(i, 1)">{{ item.roleName }}</a-tag>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div class="title flex-c">
          <h3>指定采购总金额</h3>
        </div>
        <div class="flex-c">
          <a-input-number :precision="2" v-model="editInfo.minAmount" style="width: 100px" placeholder="" />
          <span style="margin: 0 5px">~</span>
          <a-input-number :precision="2" v-model="editInfo.maxAmount" style="width: 100px" placeholder="" />
        </div>
      </div>
      <div style="margin-top: 20px">
        <div class="title flex-c">
          <h3>指定供应商</h3>
        </div>
        <a-button type="text" @click="showChooseWarehouse = true">+添加供应商</a-button>
        <div>
          <a-tag color="#165dff" style="margin: 0 10px 10px 0" v-for="(item, i) in editInfo.suppliers" :key="i" closable @close="editInfo.suppliers.splice(i, 1)">{{ item.supplierName }}</a-tag>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 选择角色 -->
  <ChooseRoles v-if="showChooseRoles" :isShow="showChooseRoles" @closed="showChooseRoles = false" @success="chooseRolesList" />
  <!-- 选择用户 -->
  <ChooseUsers v-if="showChooseUsers" :isShow="showChooseUsers" @closed="showChooseUsers = false" @success="chooseUserList" />
  <!-- 选择部门 -->
  <ChooseDepts v-if="showChooseDepts" :isShow="showChooseDepts" @closed="showChooseDepts = false" @success="chooseDeptList" />
  <!-- 选择供应商 -->
  <ChooseSuppliers v-if="showChooseWarehouse" :isShow="showChooseWarehouse" @closed="showChooseWarehouse = false" @success="chooseSupplierList" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import ChooseUsers from './chooseUsers.vue'
  import ChooseRoles from './chooseRoles.vue'
  import ChooseDepts from './chooseDepts.vue'
  import ChooseSuppliers from './chooseSuppliers.vue'

  onMounted(setDefaultData)

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
    conditionInfo: {
      type: Object,
      default: () => {},
    },
    approvalType: {
      type: String,
    },
  })

  const showChooseCopyUser = ref(props.isShow)
  const showChooseRoles = ref(false)
  const showChooseUsers = ref(false)
  const showChooseDepts = ref(false)
  const showChooseWarehouse = ref(false)

  const editInfo = ref<any>({})

  function setDefaultData() {
    let conditionInfo = props.conditionInfo || {}
    editInfo.value = {
      conditionType: conditionInfo.conditionType || 'ANY',
      promoterDepts: conditionInfo.promoterDepts || [],
      promoterRoles: conditionInfo.promoterRoles || [],
      promoters: conditionInfo.promoters || [],
      suppliers: conditionInfo.suppliers || [],
      minAmount: conditionInfo.minAmount,
      maxAmount: conditionInfo.maxAmount,
    }
  }

  // 确认
  async function submitData() {
    emit('success', editInfo.value)
    closedDialog()
    return true
  }
  // 选择角色
  function chooseRolesList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.promoterRoles.find((el: any) => el.roleId == item.roleId)) {
        editInfo.value.promoterRoles.push(item)
      }
    })
  }
  // 选择成员
  function chooseUserList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.promoters.find((el: any) => el.userId == item.userId)) {
        editInfo.value.promoters.push(item)
      }
    })
  }
  // 选择部门
  function chooseDeptList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.promoterDepts.find((el: any) => el.deptId == item.deptId)) {
        editInfo.value.promoterDepts.push(item)
      }
    })
  }
  // 选择供应商
  function chooseSupplierList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.suppliers.find((el: any) => el.supplierId == item.supplierId)) {
        editInfo.value.suppliers.push(item)
      }
    })
  }

  // 关闭
  function closedDialog() {
    showChooseCopyUser.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .dialog-con {
    height: calc(84vh - 160px);
  }
  .title {
    font-weight: bold;
    .label {
      font-size: 12px;
      margin-left: 20px;
      color: #999;
      font-weight: normal;
    }
  }
</style>
